<template>
  <div>
    <nav-bar :title="$route.params.data.cardTitle"></nav-bar>
    <div class="taskDetails maxinBox">
      <van-tabs type="card">
        <van-tab title="我的待办">
          <div style="margin-top: 1.25rem;">
            <card style="margin-bottom: 1.25rem;" v-for="(item, index) in raelTimeTask" :key="index" :data="item" cardType="task"  isBtn="true"></card>
          </div>
        </van-tab>
        <van-tab title="历史">
          <div style="margin-top: 1.25rem;">
            <card style="margin-bottom: 1.25rem;" v-for="(item, index) in fixedTask" :key="index" :data="item" cardType="task"  isBtn="true"></card>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import Card from '../components/Card.vue'
  export default {
    components: {
      Card
    },
    data() {
      return {
        fixedTask: [
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00055-1106.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
        ],
        raelTimeTask: [
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00055-1106.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00055-1106.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  .taskDetails{
    padding: $spacing;
    /deep/ .van-tabs__nav--card{
      border: 1px solid #1989fa;
      .van-tab.van-tab--active{
        color: $color;
        background-color: #1989fa;
      }
      .van-tab{
        border-right: 1px solid #1989fa;
        color: #1989fa;
      }
    }
  }
</style>
